<template>
  
</template>
<script>
import { addColor, getColorList } from '@/api/color'
import { Message } from 'element-ui'
export default {
  props: {
    page: {
      type: Number,
      required: true,
      default: 1
    },
    size: {
      type: Number,
      required: true,
      default: 10
    }
  },
  data() {
    return {
      searchColor: '',
      colorVal: '',
      postscript: '',
      searchData: {},

      colorList: [
        { label: '灰色', value: '1' },
        { label: '黑色', value: '2' },
        { label: '白色', value: '3' },
        { label: '深灰色', value: '4' },
        { label: '银色', value: '5' },
        { label: '铁灰色', value: '6' }
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    async addHandle() {
      const colorData = {
        postscript: this.postscript || '-',
        color: this.colorVal
      }
      const { code, data, message } = await addColor(colorData)
      let type = 'error'
      if (code === 200) {
        this.colorList.push(data)
        type = 'success'
      }

      Message({ message, type })
      return
    },
    async search() {
      const searchData = {
        color: this.searchColor,
        // color: this.searchColor.toString(),
        page: this.page,
        size: this.size
      }
      try {
        const { code, data } = await getColorList(searchData)
        if (code === 200) {
          this.$emit('changeColorData', data)
        }
        // Message({ type: 'success', message })
      } catch (error) {
        Message({ type: 'error', message: '获取数据失败' })
      }
    }
  }
}

</script>
<style lang="scss" scoped>
  .el-row {
    margin: 18px 0;
  }
  label {
    margin-right: 8px;
    font-size: 14px;
  }
  [class*="el-col-"] {
    text-align: left;
  }
  .b-select {
    width: 100%;
  }
  .el-select {
    width: 80%;
  }
  .status .el-select {
    width: 60%;
  }
  .create-time .el-date-editor,
  .update-time .el-date-editor {
    width: 81%;
  }
  .add-color,
  .search-color{
    display: flex;
    align-items: center;
    .el-input {
      width: 70%;
      height: 36px;
    }

    ::v-deep.el-input__inner{
      height: 36px;
    }

    .add-btn{
      height: 40px;
      display: flex;
      align-items: center;
    }
  }
  .search-color{
    .el-input{
      width: 81%;
    }
  }
</style>
